<!-- 客户信息 -->
<template>
  <div class="block">
    <!-- 统一的家属和逝者信息表单 -->
    <el-form :model="basicInfoForm" :rules="rules" ref="basicInfoFormRef" label-width="100px">
      <!-- 家属信息 -->
      <h3>家属信息</h3>
      <el-form-item label="家属姓名" prop="name">
        <el-input v-model="basicInfoForm.name"></el-input>
      </el-form-item>
      <el-form-item label="家属电话号码" prop="phone">
        <el-input type="number" v-model="basicInfoForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="basicInfoForm.gender">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 逝者信息 -->
      <h3>逝者信息</h3>
      <el-form-item label="逝者姓名" prop="deadname">
        <el-input v-model="basicInfoForm.deadname"></el-input>
      </el-form-item>
      <el-form-item label="逝者性别" prop="deadgender">
        <el-radio-group v-model="basicInfoForm.deadgender">
          <el-radio :label="3">男</el-radio>
          <el-radio :label="4">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 其他备注 -->
      <el-form-item label="其他备注" prop="other">
        <el-input type="textarea" placeholder="eg:宗教仪式" v-model="basicInfoForm.other"></el-input>
      </el-form-item>

      <!-- 提交按钮 -->
      <div class="bntbox">
        <el-button type="primary" @click="submitForm">提交</el-button>
      </div>
      
    
    </el-form>
    
    <!-- 提交记录表格 -->
    <div v-if="tableData.length > 0">
      <h3>提交记录</h3>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="家属姓名"></el-table-column>
        <el-table-column prop="phone" label="家属电话"></el-table-column>
        <el-table-column prop="gender" label="家属性别"></el-table-column>
        <el-table-column prop="deadname" label="逝者姓名"></el-table-column>
        <el-table-column prop="deadgender" label="逝者性别"></el-table-column>
      </el-table>
    </div>
  </div>
  

</template>

<script>
export default {
  data() {
    return {
      basicInfoForm: {
        name: "",
        phone: "",
        gender: "",
        deadname: "",
        deadgender: "",
        other: "",
      },
      form: {
        date1: "",
        date2: "",
        type: [],
      },
      tableData: [], // 存储提交的记录
      rules: {
        name: [
          { required: true, message: '家属姓名不能为空', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '家属电话号码不能为空', trigger: 'blur' },
          { validator: this.validatePhone, trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '性别不能为空', trigger: 'change' },
        ],
        deadname: [
          { required: true, message: '逝者姓名不能为空', trigger: 'blur' },
        ],
        deadgender: [
          { required: true, message: '逝者性别不能为空', trigger: 'change' },
        ],
        other: [
          { required: false, message: '其他备注不能为空', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    validatePhone(rule, value, callback) {
      if (value && !/^\d{11}$/.test(value)) {
        callback(new Error('请输入有效的手机号码'));
      } else {
        callback();
      }
    },
    submitForm() {
      this.$refs.basicInfoFormRef.validate((valid) => {
        if (valid) {
           // 表单验证成功，添加到表格数据中
           this.tableData.push({
            name: this.basicInfoForm.name,
            phone: this.basicInfoForm.phone,
            gender: this.basicInfoForm.gender,
            deadname: this.basicInfoForm.deadname,
            deadgender: this.basicInfoForm.deadgender,
            // ... 其他字段 ...
          });
          // 清空表单，准备下一次输入
          this.resetForm();
          // 提交成功的提示
          this.$message.success("信息提交成功！");
        } else {
          // 表单验证失败
          this.$message.error("表单验证失败，请填写完整信息！");
          return false;
        }
      });
    },
    resetForm() {
      // 重置表单数据
      this.basicInfoForm = {
        // 初始化数据
      };
      // 重置表单验证规则
      this.$refs.basicInfoFormRef.resetFields();
    },
  },
};
</script>

<style>
.block {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ebeef5; 
  border-radius: 4px;
  background-color: #ffffff;
}

.el-form-item {
  margin-bottom: 20px; 
}
.bntbox{
  width: 100%;
  height: 40px;
  text-align: center;
}
</style>